<!--
 * @Description:
 * @Author: FangYaoTang
 * @Date: 2023-08-16 09:19:28
 * @LastEditor: FangYaoTang
 * @LastEditTime: 2023-08-16 09:19:29
 * @Copyright: by 南京桓羽信息科技有限公司 禁止任何形式（包含二次开发）转售系统源码，违者必究。
-->

<template>
  <view class="page_content">
    <view class="head_content">
      <CustomNavbar title="Member Centre" color="#fff" bg="#262626"></CustomNavbar>
    </view>
    <view class="main_content">
      <view class="vip_box">
        <view class="top" v-if="userInfo.is_vip == 1">
          <view class="line1">Distinguished VIP user</view>
          <view class="line2">
            <text class="text1"></text>
            <text class="text2">{{ userInfo.vip_expiretime_text }} expire</text>
          </view>
        </view>
        <view class="top" v-else>
          <view class="line1">monthly vip</view>
          <view class="line2">
            <text class="text1">Membership to enjoy</text>
            <text class="text2">better service</text>
          </view>
        </view>
        <view class="bottom">
          <view class="line1">
            <text class="text1"
              >Once you become a member, you can watch member-exclusive videos for free.</text
            >
            <!-- <text class="text2">Ai智能助手</text> -->
          </view>
          <view class="line2"></view>
        </view>
        <image
          class="vip_image"
          src="https://img.nymaite.com/video_short/icons/vip.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="pay_box box_bg">
        <view class="title_box">
          <image
            class="image1"
            src="https://img.nymaite.com/video_short/images/arrow.png"
            mode="widthFix"
          ></image>
          <text class="text">Open membership options</text>
          <image
            class="image2"
            src="https://img.nymaite.com/video_short/images/arrow.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="card_box">
          <view class="item" v-for="(item, index) in vipList" :key="item.id" @click="openVip(item)">
            <view class="price">
              <!-- <view class="oprice">￥{{ item.original_price }}</view> -->
              <view class="cprice">
                <text class="text1">$</text>
                <text class="text2">{{ item.amount }}</text>
                <view class="text3">{{ item.info }}</view>
              </view>
            </view>
            <view class="button">Join</view>
          </view>
        </view>
      </view>

      <view class="task_box box_bg">
        <view class="title_box">
          <image
            class="image1"
            src="https://img.nymaite.com/video_short/images/arrow.png"
            mode="widthFix"
          ></image>
          <text class="text">{{ textTitle }}</text>
          <image
            class="image2"
            src="https://img.nymaite.com/video_short/images/arrow.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="info_box">
          <u-parse :content="textInfo"></u-parse>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import store from '@/common/store/index.js'
import { ApplePay } from '../../../common/utils/applePay.js'
export default {
  data() {
    return {
      isColor: getApp().globalData.isColor,
      isBgColor: getApp().globalData.isBgColor,
      vipList: [],
      buttonLoading: true,
      textTitle: '',
      textInfo: '',
      applePay: null
    }
  },
  computed: {
    ...mapGetters('user', ['token', 'userInfo']),
    ...mapGetters('app', ['iosIsPay'])
  },
  watch: {},
  async onShow() {
    await this.$onLaunched
    this.isColor = getApp().globalData.isColor
    this.isBgColor = getApp().globalData.isBgColor
  },
  onLoad() {
    this.getVipList()
    console.log(new ApplePay())
    this.applePay = new ApplePay()
  },
  methods: {
    ...mapActions('user', ['getUserInfo']),
    // 获取vip类型
    getVipList() {
      this.$request('user.vip').then((res) => {
        if (res.data && res.data.length) {
          res.data.forEach((v) => {
            if (v.amount == 28) {
              v.amount = 3.99
            } else if (v.amount == 78) {
              v.amount = 12.99
            } else if (v.amount == 168) {
              v.amount = 24.99
            }
          })
          this.vipList = res.data
        }
        this.textTitle = res.data?.vip_desc?.title || 'VIP membership benefits'
        this.textInfo =
          res.data?.vip_desc?.content ||
          '<div>Thank you for choosing the VIP package of BtcShort, which is a premium membership service we provide to our users. As a VIP user, you will enjoy the following privileges and benefits: </div><div><br /></div><div>1. Watch VIP videos for free: As a VIP member, you will watch all videos marked as VIP for free Video content. These videos are usually exclusive, high-quality content, including popular movies, TV series, variety shows, etc. You can enjoy this content at no additional cost. </div><div><br /></div><div>2. Discounts for purchasing paid videos: In addition to watching VIP videos for free, VIP users can also enjoy the privilege of purchasing paid videos at discounts. There are some video contents on the platform that require payment to watch. As a VIP member, you will enjoy lower prices to purchase these videos. This will significantly reduce your cost of watching high-quality videos and make it easier for you to get the content that interests you. </div><div><br /></div><div>3. Provide exclusive benefits and activities: As a VIP member, you will regularly receive exclusive benefits and activity information customized for VIP users. This may include special events such as movie viewing events, members-only events, and some limited-time offers only for VIP members. We will ensure that you enjoy unique treatment in the drama VIP community, allowing you to feel more value and fun. </div><div><br /></div><div>4. Fast playback and ad-free experience: As a VIP user, you will enjoy faster video loading speed and smooth playback experience. In addition, when watching videos, you will no longer be interrupted by lengthy advertisements, allowing you to continue to immerse yourself in exciting content, improving the comfort and quality of watching movies. </div><div><br /></div><div>5. Priority customer service support: As a VIP member, your questions and needs will receive priority support from our dedicated customer service team. Whether it is about account issues, payment questions or other usage confusions, we will wholeheartedly provide you with answers and help to ensure that you have a smooth and pleasant experience. </div><div><br /></div><div>Purchasing the short drama VIP package will bring you a better viewing experience and a richer content selection. Come and join our VIP membership ranks and enjoy the wonderful audio-visual feast with Drama Rich Shorts!</div></div>'
      })
    },
    // 开通vip
    openVip({ id, amount, productId = 'com.juyouqian.top_8' }) {
      this.$request('order.create', { id, type: 'vip' }).then((res) => {
        let {pay_url} = res.data
        try {
          plus.runtime.openURL(pay_url)
        } catch (err) {
          window.location.href = pay_url
        }
      })
      return
      const token = store.state.user.token || ''
      // #ifdef H5
      if (!this.iosIsPay) return this.jumpView('/pages/user/info/contact')
      // #endif
      if (this.buttonLoading) {
        this.buttonLoading = false
        // this.applePay.pay([productId], null, null, () => {
        // 	this.jumpView(`/pages/shouyitai/index?id=${id}&pay_amount=${amount}`)
        // })
        if (token) {
          this.jumpView(
            `/pages/shouyitai/index?id=${id}&pay_amount=${amount}&productId=${productId}`
          )
        } else {
          uni.showModal({
            title: 'Login prompt',
            content: 'You have not logged in yet, please log in first',
            cancelText: 'Cancel',
            confirmText: 'Confirm',
            success: (res) => {
              if (res.confirm) {
                uni.redirectTo({ url: '/pages/login/login' })
              }
            }
          })
        }
        this.buttonLoading = true
        // uni.showLoading({
        // 	title: '开通中...',
        // 	mask: true
        // })

        // this.$request('order.create', {
        // 	id,
        // 	total_fee: price,
        // 	platform: this.$utils.platforms()
        // }).then(res => {
        // 	if(res.code === 1) {
        // 		this.callPay(res.data.order_sn, 'H5', res.data.platform)
        // 	}
        // })
      }
    },
    // 获取支付参数
    callPay(order_sn, payment, platform) {
      this.$request('common.ifxunipay').then((res) => {
        console.log(res)
        if (res.data.xunipay_switch == 0) {
          this.$request('common.pay', {
            order_sn,
            payment,
            platform
          }).then((res) => {
            console.log(res)
            if (res.code === 1) {
              if (platform == 'H5') {
                console.log('进入这里\(^o^)/~')
                const div = document.createElement('divpay')
                div.innerHTML = res.data.pay_data
                document.body.appendChild(div)
              } else {
                console.log('进入这里无语')

                this.pay(res.data.pay_data)
              }
            }
          })
        } else {
          // #ifdef H5
          uni.login({
            provider: 'weixin',
            success: (success) => {
              if (success.errMsg === 'login:ok') {
                this.$request('common.xunipay', {
                  order_sn,
                  payment,
                  platform,
                  code: success.code
                }).then((res) => {
                  console.log(res)
                  if (res.code === 1) {
                    if (platform == 'H5') {
                      const div = document.createElement('divpay')
                      div.innerHTML = res.data.pay_data
                      document.body.appendChild(div)
                    } else {
                      this.xunipay(res.data.pay_data)
                    }
                  }
                })
              }
            }
          })
          // #endif
          // #ifndef H5

          this.$request('common.pay', {
            order_sn,
            payment,
            platform
          }).then((res) => {
            console.log(res)
            if (res.code === 1) {
              if (platform == 'H5') {
                const div = document.createElement('divpay')
                div.innerHTML = res.data.pay_data
                document.body.appendChild(div)
              } else {
                this.pay(res.data.pay_data)
              }
            }
          })
          // #endif
        }
      })
    },
    // 发起 小程序/公众号 支付
    xunipay(pay) {
      var that = this
      // #ifdef H5
      const SDKVersion = wx.getSystemInfoSync().SDKVersion

      if (this.compareVersion(SDKVersion, '2.19.2') >= 0 || wx.canIUse('requestVirtualPayment')) {
        wx.requestVirtualPayment({
          signData: JSON.stringify({
            offerId: pay.signData.offerId,
            buyQuantity: pay.signData.buyQuantity,
            env: pay.signData.env,
            currencyType: pay.signData.currencyType,
            platform: pay.signData.platform,
            productId: pay.signData.productId,
            goodsPrice: pay.signData.goodsPrice,
            outTradeNo: pay.signData.outTradeNo,
            attach: pay.signData.attach
          }),
          paySig: pay.paySig,
          signature: pay.signature,
          mode: pay.mode,
          success(res) {
            //console.log('requestVirtualPayment success', res)
            uni.showToast({
              title: 'Payment successful',
              icon: 'none',
              duration: 2000
            })
            that.buttonLoading = true
            that.getUserInfo()
            uni.$emit('updateUserInfo', true)
            uni.hideLoading()
          },
          fail({ errMsg, errCode }) {
            //console.error(errMsg, errCode)
            uni.showToast({
              title: 'Payment failed',
              icon: 'none',
              duration: 2000
            })
            that.buttonLoading = true
            uni.hideLoading()
          }
        })
      } else {
        //console.log('当前用户的客户端版本不支持 wx.requestVirtualPayment')

        uni.showToast({
          title: '当前用户的客户端版本不支持小程序虚拟支付',
          icon: 'none',
          duration: 2000
        })
        this.buttonLoading = true
        uni.hideLoading()
      }
      // #endif

      // // #ifdef H5

      // WeixinJSBridge.invoke(
      // 	'getBrandWCPayRequest', {
      // 		"appId": pay.appId, // 公众号ID，由商户传入
      // 		"timeStamp": pay.timeStamp, // 时间戳，自1970年以来的秒数
      // 		"nonceStr": pay.nonceStr, // 随机串
      // 		"package": pay.package, // 订单详情扩展字符串
      // 		"signType": pay.signType, // 微信签名方式：
      // 		"paySign": pay.paySign // 微信签名
      // 	},
      // 	res => {
      // 		if (res.err_msg == "get_brand_wcpay_request:ok") {
      // 			uni.showToast({
      // 			    title: 'Payment successful',
      // 				icon: 'none',
      // 				duration: 2000
      // 			});
      // 			this.buttonLoading = true
      // 			this.getUserInfo()
      // 			uni.$emit('updateUserInfo', true)
      // 			uni.hideLoading()
      // 		} else {
      // 			uni.showToast({
      // 			    title: 'Payment failed',
      // 				icon: 'none',
      // 				duration: 2000
      // 			});
      // 			this.buttonLoading = true
      // 			uni.hideLoading()
      // 		}
      // 	});
      // // #endif

      // // #ifdef APP-PLUS
      // // APP
      // 	uni.getProvider({
      // 		service: "payment",
      // 		success: e => {
      // 			const type = e.provider.includes('wxpay')
      // 			type && uni.requestPayment({
      // 				"provider": "wxpay",
      // 				"orderInfo": pay,
      // 				success: success => {
      // 					uni.showToast({
      // 						title: 'Payment successful',
      // 						icon: 'none',
      // 						duration: 2000
      // 					});

      // 					this.buttonLoading = true
      // 					this.getUserInfo()
      // 					uni.$emit('updateUserInfo', true)
      // 					uni.hideLoading()
      // 				},
      // 				fail: fail => {
      // 					if(fail.errCode === -8) {
      // 						uni.showToast({
      // 							title: '未安装微信客户端',
      // 							icon: 'none',
      // 							duration: 2000
      // 						});
      // 						this.buttonLoading = true
      // 						uni.hideLoading()
      // 					} else {
      // 						uni.showToast({
      // 							title: 'Payment failed',
      // 							icon: 'none',
      // 							duration: 2000
      // 						});
      // 						this.buttonLoading = true
      // 						uni.hideLoading()
      // 					}
      // 				}
      // 			})
      // 		},
      // 		fail: e => {
      // 			this.payFail("获取iap支付通道失败")
      // 		}
      // 	});
      // // #endif
    },
    pay(pay) {
      // #ifdef H5
      uni.requestPayment({
        timeStamp: pay.timeStamp,
        nonceStr: pay.nonceStr,
        package: pay.package,
        signType: pay.signType,
        paySign: pay.paySign,
        success: (success) => {
          uni.showToast({
            title: 'Payment successful',
            icon: 'none',
            duration: 2000
          })
          this.buttonLoading = true
          this.getUserInfo()
          uni.$emit('updateUserInfo', true)
          uni.hideLoading()
        },
        fail: (fail) => {
          uni.showToast({
            title: 'Payment failed',
            icon: 'none',
            duration: 2000
          })
          this.buttonLoading = true
          uni.hideLoading()
        }
      })
      // #endif

      // #ifdef H5

      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          appId: pay.appId, // 公众号ID，由商户传入
          timeStamp: pay.timeStamp, // 时间戳，自1970年以来的秒数
          nonceStr: pay.nonceStr, // 随机串
          package: pay.package, // 订单详情扩展字符串
          signType: pay.signType, // 微信签名方式：
          paySign: pay.paySign // 微信签名
        },
        (res) => {
          if (res.err_msg == 'get_brand_wcpay_request:ok') {
            uni.showToast({
              title: 'Payment successful',
              icon: 'none',
              duration: 2000
            })
            this.buttonLoading = true
            this.getUserInfo()
            uni.$emit('updateUserInfo', true)
            uni.hideLoading()
          } else {
            uni.showToast({
              title: 'Payment failed',
              icon: 'none',
              duration: 2000
            })
            this.buttonLoading = true
            uni.hideLoading()
          }
        }
      )
      // #endif
      // #ifdef APP-PLUS
      // APP
      uni.getProvider({
        service: 'payment',
        success: (e) => {
          const type = e.provider.includes('wxpay')
          type &&
            uni.requestPayment({
              provider: 'wxpay',
              orderInfo: pay,
              success: (success) => {
                uni.showToast({
                  title: 'Payment successful',
                  icon: 'none',
                  duration: 2000
                })

                this.buttonLoading = true
                this.getUserInfo()
                uni.$emit('updateUserInfo', true)
                uni.hideLoading()
              },
              fail: (fail) => {
                if (fail.errCode === -8) {
                  uni.showToast({
                    title: '未安装微信客户端',
                    icon: 'none',
                    duration: 2000
                  })
                  this.buttonLoading = true
                  uni.hideLoading()
                } else {
                  uni.showToast({
                    title: 'Payment failed',
                    icon: 'none',
                    duration: 2000
                  })
                  this.buttonLoading = true
                  uni.hideLoading()
                }
              }
            })
        },
        fail: (e) => {
          this.payFail('获取iap支付通道失败')
        }
      })
      // #endif
    },
    //判断微信js版本用
    compareVersion(_v1, _v2) {
      if (typeof _v1 !== 'string' || typeof _v2 !== 'string') return 0

      const v1 = _v1.split('.')
      const v2 = _v2.split('.')
      const len = Math.max(v1.length, v2.length)

      while (v1.length < len) {
        v1.push('0')
      }
      while (v2.length < len) {
        v2.push('0')
      }

      for (let i = 0; i < len; i++) {
        const num1 = parseInt(v1[i], 10)
        const num2 = parseInt(v2[i], 10)

        if (num1 > num2) {
          return 1
        } else if (num1 < num2) {
          return -1
        }
      }

      return 0
    }
  }
}
</script>

<style lang="scss" scoped>
.page_content {
  background: #262626;

  .main_content {
    overflow-y: auto;
    padding: 24rpx 32rpx 60rpx 32rpx;
    position: relative;

    .vip_box {
      height: 300rpx;
      border: 2rpx solid transparent;
      border-radius: 40rpx;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(90deg, #1f2123, #141211),
        linear-gradient(90deg, #d2d2bb, #393834);

      padding: 32rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;

      .top {
        .line1 {
          color: transparent;
          background: linear-gradient(90deg, #f1b873 0%, #f2dba8 100%);
          -webkit-background-clip: text;
          font-size: 48rpx;
          font-weight: 900;
          // font-style: italic;
        }

        .line2 {
          font-size: 24rpx;
          margin-top: 12rpx;

          .text1 {
            color: #827f75;
          }

          .text2 {
            color: #e4ceac;
          }
        }
      }

      .bottom {
        .line1 {
          font-size: 24rpx;
          color: #e4ceac;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .text1 {
          }

          .text2 {
          }
        }

        .line2 {
          width: 100%;
          height: 8rpx;
          border-radius: 8rpx;
          background: linear-gradient(90deg, #edd9ab 0%, #f6c787 100%);
          margin-top: 12rpx;
        }
      }

      .vip_image {
        width: 260rpx;
        position: absolute;
        top: -52rpx;
        right: 0;
      }
    }

    .title_box {
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .image1 {
        width: 50rpx;
        transform: rotate(180deg);
      }

      .text {
        font-size: 36rpx;
        color: #ead0ae;
        text-shadow: 0 2rpx 0 0 #000000;
        font-weight: bold;
        margin: 0 25rpx;
      }

      .image2 {
        width: 50rpx;
      }
    }

    .info_box {
      color: #fad9b4;
      font-size: 28rpx;
    }

    .box_bg {
      border-radius: 20rpx;
      padding: 40rpx 32rpx 48rpx 32rpx;
      border: 2rpx solid #96948c;
      background: linear-gradient(225deg, #3d3d3b 0%, #2f2d2d 100%);
      box-shadow: 0 0 16rpx 0rpx rgba(#000, 0.2);
    }

    .pay_box {
      margin-top: 48rpx;

      .card_box {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -20rpx;

        .item {
          width: calc((100% - 60rpx) / 3);
          height: 284rpx;
          background-image: url('https://img.nymaite.com/video_short/images/card_1.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          padding: 40rpx 0 24rpx;
          font-weight: bold;
          margin: 0 30rpx 30rpx 0;

          &:nth-child(3n) {
            margin-right: 0;
          }

          .price {
            text-align: center;
            margin-top: 10rpx;

            .oprice {
              font-size: 24rpx;
              color: #62615d;
              text-decoration: line-through;
              margin-bottom: 4rpx;
            }

            .cprice {
              color: #603b25;

              .text1 {
                font-size: 24rpx;
              }

              .text2 {
                font-size: 38rpx;
              }

              .text3 {
                font-size: 32rpx;
              }
            }
          }

          .button {
            width: 164rpx;
            height: 56rpx;
            line-height: 54rpx;
            text-align: center;
            color: #fff;
            font-size: 28rpx;
            background-image: url('https://img.nymaite.com/video_short/images/button.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            // background: linear-gradient(90deg, #a110c7 0%, #10e5fb 100%);
            // border-radius: 48rpx;
            font-weight: bold;
          }
        }
      }
    }

    .task_box {
      margin-top: 32rpx;
    }
  }
}
</style>
